<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天室</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body class="bg-blur">
  <!-- 登录盒子 -->
  <div class="login_box" style="display: block;">
    <div class="title"></div>
    <p>用户名</p>
    <input type="text" placeholder="请输入用户名" id="username">
    <p>选择头像</p>
    <ul class="avatar" id="login_avatar">
      <li class="now"><img src="images/avatar01.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar02.jpg" alt="" ondragstart="return false"></li>
      <li><img src="images/avatar03.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar04.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar05.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar06.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar07.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar08.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar09.jpg" alt=""  ondragstart="return false"></li>
      <li><img src="images/avatar10.jpg" alt=""  ondragstart="return false"></li>
    </ul>
    <button class="weui-btn" id="loginBtn">登录</button>
  </div>
  <!-- 聊天盒子 -->
  <div class="container" style="display: none;">
    <!-- 左侧用户列表 -->
    <div class="user-list">
      <div class="header">
        <div class="avatar">
          <img src="images/avatar02.jpg" alt="" class="img avatar_url">
        </div>
        <div class="info">
          <h3 class="username">陆凌波</h3>
        </div>
      </div>
      <div class="title">
        <h3>用户列表</h3>
      </div>
      <ul>
        
      </ul>
    </div>
    <!-- 聊天窗口 -->
    <div class="box">
      <!-- 聊天窗口头部 -->
      <div class="box-hd">
        <h3 id="chatName">群聊(<span id="userCount">0</span>)</h3>
      </div>

      <!-- 聊天窗口主体 -->
      <div class="box-bd"></div>

      <!-- 聊天窗口底部 -->
      <div class="box-ft">
        <!-- 内容输入区 -->
        <div class="content">
          <!-- div添加contenteditable即可编辑 -->
          <div name="" id="content" class="text" contenteditable></div>
        </div>
        <!-- 发送按钮 -->
        <div class="action">
          <!-- <span class="desc">按下Ctrl+Enter发送</span> -->
          <a class="btn-send" id="btn-send" href="javascript:;">发送</a>
          
        </div>
      </div>
    </div>
  </div>
  <!-- 引入socketio -->
  <script src="/socket.io/socket.io.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/index.js"></script>
  <script src="js/localforage.js"></script>
  <!-- <script>localforage.config();</script>
  <script>localforage.getItem('something', myCallback);</script> -->
</body>
</html>